<template>
  <el-container>
    <el-main style="margin-top:200px">
      <el-row>
        <h1>校园实验室管理系统</h1>
        <el-col :offset="9"
                :span="6">
          <el-form>
            <el-form-item label="账号"
                          label-width="100px">
              <el-input v-model="user.userName"
                        placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="密码"
                          label-width="100px">
              <el-input v-model="user.password"
                        type="password"
                        placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="login">登录</el-button>
              <el-button @click="isShowRegistDialog = true">注册</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-dialog title="用户注册"
                 :visible.sync="isShowRegistDialog"
                 width="400px">
        <el-form label-width="80px"
                 :model="registUserForm"
                 :rules="rules"
                 ref="registForm">
          <el-form-item label="用户名"
                        prop="userName">
            <el-input v-model="registUserForm.userName" />
          </el-form-item>
          <el-form-item label="昵称"
                        prop="nickName">
            <el-input v-model="registUserForm.nickName" />
          </el-form-item>
          <el-form-item label="密码"
                        prop="password1">
            <el-input type="password"
                      v-model="registUserForm.password1" />
          </el-form-item>
          <el-form-item label="确认密码"
                        prop="password2">
            <el-input type="password"
                      v-model="registUserForm.password2" />
          </el-form-item>
          <el-form-item label="手机号"
                        prop="phone">
            <el-input v-model="registUserForm.phone" />
          </el-form-item>
          <el-form-item label="系别"
                        prop="tieId">
            <el-select style="width:280px"
                       v-model="registUserForm.tieId">
              <el-option v-for="item in ties"
                         :key="item.id"
                         :label="item.tieName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="班级"
                        prop="classId">
            <el-select style="width:280px"
                       v-model="registUserForm.classId">
              <el-option v-for="item in classes"
                         :key="item.id"
                         :label="item.className"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="primary"
                     @click="regist">提 交</el-button>
          <el-button @click="isShowRegistDialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      user: {
        userName: null,
        password: null
      },
      ties: [],
      classes: [],
      registUserForm: {
        userName: null,
        password1: null,
        password2: null
      },
      rules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ],
        tieId: [
          { required: true, message: '系别不能为空', trigger: 'blur' }
        ],
        grade: [
          { required: true, message: '年级不能为空', trigger: 'blur' }
        ],
        classId: [
          { required: true, message: '班级不能为空', trigger: 'blur' }
        ],
      },
      isShowRegistDialog: false
    }
  },
  watch: {
    registUserForm: {
      handler: function (val) {
        if (val) {
          let { tieId } = val
          if (tieId) {
            this.$axios.get('sysClass', { params: { tid: tieId } }).then(res => {
              let data = res.data
              this.classes = data
            })
          }
        }
      },
      deep: true
    }
  },
  created () {
    this.findTies()
  },
  methods: {
    login () {
      let vm = this
      this.$axios.post('user/login', this.user).then(res => {
        if (res.data.code === '10000') {
          this.$message({
            type: 'success',
            message: '登录成功!'
          })
          vm.$session.set('access_token', res.data.token)
          vm.$session.set('isLogout', false)
          vm.$router.push({ name: 'userMainPage' })
        } else {
          this.$message({
            type: 'warning',
            message: '密码或用户名不正确!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '登录失败!'
        })
      })
    },
    regist () {
      this.$refs['registForm'].validate((valid) => {
        if (valid) {
          let { password1, password2 } = this.registUserForm
          if (password1 !== password2) {
            this.$message({
              type: 'warning',
              message: '密码输入不一致!'
            })
            return
          }
          this.registUserForm.password = password1
          this.$axios.post('user/register', this.registUserForm).then(res => {
            let data = res.data
            if (data.code === '20000') {
              this.$message({
                type: 'success',
                message: data.message
              })
              this.isShowRegistDialog = false
              this.user.userName = this.registUserForm.userName
              this.user.password = this.registUserForm.password
            } else {
              this.$message({
                type: 'warning',
                message: data.message
              })
            }
          })
        } else {
          return false
        }
      })
    },
    findTies () {
      this.$axios.get('sysTie').then(res => {
        let data = res.data
        this.ties = data
      })
    }
  }
}
</script>